import React from 'react'
// import ZxHoc from '../ZxHoc/ZxHoc'
import './ZxActive.css'
import ZxActiveText from '../ZxModal/ZxActiveText'
import * as api from '../../utils/Zxapi'
import axios from 'axios'

class ZxActive extends React.Component{
    constructor(){
        super()
        this.state={
            currentPage:1,
            pageSize:5,
            shop_phone:1,
            activeId:'',
            ActiveData:[],

            childernData:''
        }
    }
      /*组件加载完毕后==调用获取当前组件的所有数据  */
    componentDidMount(){
        // console.log(this.refs.id);
        this.getZxActiveData()
        
    }
    getZxActiveData=()=>{
        let {currentPage,pageSize,shop_phone,ActiveData}=this.state
        // let {activeDidMoney,activeCutMoney,Change}=this.props
        axios({
            url:api.GET_STOPACTIVE,
            method:'get',
            params:{
                currentPage:currentPage,
                pageSize:pageSize,
                shop_phone:shop_phone
            }
        }).then(data=>{
            // console.log(data.data.dataList);
            /* 这里拿到===查询满减活动的所有数据 */
            if(data.data.dataList.length>0){
                /* 再将满减活动的数据保存到本组件的state里面==== 
                =====如果只显示一条就直接用保存的数据赋值即可*/
                this.setState({
                    ActiveData:data.data.dataList
                })
            }
        }).catch(err=>{

        })
    }
    subMit=()=>{
        this.changeActive()
       if(this.state.ActiveData){
          /* input框里面有满减活动的时候就是修改满减活动的内容 */
       }else{
        /* input框里面没有满减活动的时候就是添加满减活动的内容 */
       }
        // console.log(123456);
    }
    /*修改满减活动  */
    changeActive=()=>{
        console.log(this.child);
        let {currentPage,pageSize,shop_phone,ActiveData}=this.state
        ActiveData.forEach(item=>{
           if(item.active_id){

           }
           
        })
        // console.log(activeId);
        axios({
            url:api.GET_STOPACTIVE,
            method:'get',
            params:{
                // active_id：''，
                currentPage:currentPage,
                pageSize:pageSize,
                shop_phone:shop_phone
            }
        }).then(data=>{
            // console.log(data.data.dataList);
            /* 这里拿到===查询满减活动的所有数据 */
            if(data.data.dataList.length>0){
                /* 再将满减活动的数据保存到本组件的state里面==== 
                =====如果只显示一条就直接用保存的数据赋值即可*/
                this.setState({
                    ActiveData:data.data.dataList
                })
            }
        }).catch(err=>{

        })
    }
    /* 自定义个获取子组件数据的方法====为了拿取子组件的active_id */
    
    render(){
        /* 最开始原本在这个组件使用高阶组件====但是多条数据的话就不好实现=====
        ===因此将input结构部分单独抽取出来写成一个组件引入进来=== */
        // let {activeDidMoney,activeCutMoney,Change}=this.props
        let {ActiveData,childernData}=this.state
    
        /* 多条满减活动数据====在这里重新用====一个数组来将map出来的数据装起来===
        然后在map里面循环input的组件===将值绑到子组件上去== 
        showData放到结构里面去渲染出来====*/
        let  showData=[]
        showData=ActiveData.map(item=><ZxActiveText item={item} 
            key={item.active_id}
            onRef={(ref)=>{this.child=ref}}></ZxActiveText>)

        return(
            <div className='formActiveBox'>
                <form action="">
                    <h3>满减活动</h3>
                    {showData}
                     {/* {ActiveData.map(item=><ZxActiveText item={item} key={item.active_id} parent={this}> </ZxActiveText>)} */}

                    {/* <label>
                        满：<input type="text" 
                                className='activeInput'
                                onChange={Change('activeDidMoney')}
                                value={activeDidMoney}/>
                    </label>
                    <label>
                        减：<input type="text"
                                 className='activeInput'
                                 value={activeCutMoney}
                                 onChange={Change('activeCutMoney')}
                            />
                    </label> */}
                    <br/>
                     <button className='activeBtn' onClick={this.subMit}>保存</button>
                </form>
            </div>
            
        )
    }
}

// export default ZxHoc(ZxActive)
export default ZxActive